<%@ page language="java" contentType="text/html; charset=UTF8" pageEncoding="UTF8"
         import="es.ats.codington.festival.domain.Event" 
         import="java.util.ArrayList"%>
<html>
	<head>
		<jsp:include page="wireframe.jsp"/>
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-datetimepicker.css" />
        <link rel="stylesheet" type="text/css" href="./css/preview.css" />
        <script type="text/javascript" src="./js/moment.js"></script>
        <script type="text/javascript" src="./js/bootstrap-datetimepicker.min.js"></script>
	</head>
	<body>
		<jsp:include page="navbar.jsp"/>
		<div class="container" style="margin-top:100px;">
            <div class="row">
                <div class="col-xs-3"></div>
                <div class="col-xs-6">
                    <div class="panel panel-default" align="center">
                        <div class="panel-heading">
                            <h3 class="panel-title">New event form
                        </div>
                        <div class="panel-body">
                            <form role="form" action="pnewevent" method="post" enctype="multipart/form-data">
                                
								<div class="form-group">
                                     <input type="text" id="name" name="name" minlength=0 maxlength=30 class="form-control input-sm" placeholder="Name" required>
                                </div>                                

                                <div class="form-group">
                                     <input type="text" id="description" name="description" minlength=0 maxlength=30 class="form-control input-sm" placeholder="Description" required>
                                </div>
								<div class='input-group date' id='datetimepicker1'>
									<input type='text' class="form-control" name="start" required/>
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
									</span>
								</div>
								<br>
                                <div class="form-group">
                                	<select name="place" required>
									  <option value="">Select the place...</option>
									  <option value="1">Large Bussines Center</option>
									  <option value="2">Museum</option>
									  <option value="3">Tourist Attraction</option>
									  <option value="4">Stadium</option>
									  <option value="5">Theater</option>
									  <option value="6">Park</option>
									  <option value="7">Traditional Market</option>
									  <option value="8">Zoo</option>
									</select>
                               </div>

                                <div class="form-group">
                                     <input type="text" id="duration" name="duration" minlength=0 maxlength=30 class="form-control input-sm" placeholder="Duration">
                                </div>

                                <div class="form-group">
                                     <input type="text" id="price" name="price" minlength=0 maxlength=30 class="form-control input-sm" placeholder="Price (€)">
                                </div>

                                <div class="form group input-group image-preview">
					                <span class="input-group-addon"><i class="glyphicon glyphicon-star-empty"></i></span>
					                <input type="text" class="form-control image-preview-filename" placeholder="Imagen" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
					                <span class="input-group-btn">
					                    <!-- image-preview-clear button -->
					                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
					                        <span class="glyphicon glyphicon-remove"></span> Clear
					                    </button>
					                    <!-- image-preview-input -->
					                    <div class="btn btn-default image-preview-input">
					                        <span class="glyphicon glyphicon-folder-open"></span>
					                        <span class="image-preview-input-title">Browse</span>
					                        <input type="file" accept="image/png, image/jpeg, image/gif" name="image" required/> 
					                    </div>
					                </span>
					            </div>
                                <br>
                                <div class="controls">
                                    <button type="submit" class="btn btn-success">Add New Event</button>
                                </div>
                        
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3"></div>
            </div>
        </div>
	<script type="text/javascript">
	$(function () {
	$('#datetimepicker1').datetimepicker();
	});
	</script>
	<script type="text/javascript">
        $(document).on('click', '#close-preview', function(){ 
            $('.image-preview').popover('hide');
            // Hover befor close the preview
            $('.image-preview').hover(
                function () {
                   $('.image-preview').popover('show');
                }, 
                 function () {
                   $('.image-preview').popover('hide');
                }
            );    
        });

        $(function() {
            // Create the close button
            var closebtn = $('<button/>', {
                type:"button",
                text: 'x',
                id: 'close-preview',
                style: 'font-size: initial;',
            });
            closebtn.attr("class","close pull-right");
            // Set the popover default content
            $('.image-preview').popover({
                trigger:'manual',
                html:true,
                title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
                content: "There's no image",
                placement:'top'
            });
            // Clear event
            $('.image-preview-clear').click(function(){
                $('.image-preview').attr("data-content","").popover('hide');
                $('.image-preview-filename').val("");
                $('.image-preview-clear').hide();
                $('.image-preview-input input:file').val("");
                $(".image-preview-input-title").text("Browse"); 
            }); 
            // Create the preview image
            $(".image-preview-input input:file").change(function (){     
                var img = $('<img/>', {
                    id: 'dynamic',
                    width:250,
                    height:200
                });      
                var file = this.files[0];
                var reader = new FileReader();
                // Set preview image into the popover data-content
                reader.onload = function (e) {
                    $(".image-preview-input-title").text("Change");
                    $(".image-preview-clear").show();
                    $(".image-preview-filename").val(file.name);            
                    img.attr('src', e.target.result);
                    $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
                }        
                reader.readAsDataURL(file);
            });  
        });
    </script>
</body>
</html>